<template>
	<view class="member-style">
		<image class="backdrop-img" src="../../static/pay-bg.png" />
		<view class="user-message">
			<view class="user-avatar"></view>
			<view class="user-text">
				<view class="user-name">用户名称</view>
				<view class="user-normal">普通会员</view>
				<view class="user-id">会员编号：8888888888</view>
			</view>
		</view>
		<view class="body-backdrop">
			<view class="body-text">
				<view>
					<view class="text-top">¥88888.88</view>
					<view class="text-bon">电子卡余额</view>
				</view>
				<view>
					<view class="text-top">¥88888.88</view>
					<view class="text-bon">车队卡余额</view>
				</view>
				<view>
					<view class="text-top">¥88888.88</view>
					<view class="text-bon">实体卡余额</view>
				</view>
			</view>
			<view class="body-hr"></view>
			<view class="body-text">
				<view>
					<view class="text-top">88888</view>
					<view class="text-bon">积分</view>
				</view>
				<view>
					<view class="text-top">88888</view>
					<view class="text-bon">充值次数</view>
				</view>
				<view>
					<view class="text-top">88888</view>
					<view class="text-bon">消费次数</view>
				</view>
			</view>
		</view>
		<view class="text" @click="topConsum">
			<image style="width: 50rpx; height: 50rpx;" src="../../static/img/order.png"></image>
			<text>消费扣款</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			topConsum() {
				console.log("跳转到消费扣款")
				uni.navigateTo({
					url: './consumptionDeduction'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background-color: #F5F5F9;
	}

	.member-style {
		position: relative;
		width: 100%;
		height: 100%;
	}

	.backdrop-img {
		width: 100%;
	}

	.user-message {
		position: absolute;
		display: flex;
		flex-direction: row;
		top: 0;
		left: 0;
		width: 100%;
		padding: 20px;
	}

	.user-avatar {
		margin-right: 30px;
		width: 70px;
		height: 70px;
		background-color: aqua;
		border-radius: 50%;
	}

	.user-text {
		height: 70px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.user-name {
		font-size: 20px;
		margin-bottom: 5px;
	}

	.user-normal {
		font-size: 12px;
		margin-bottom: 5px;
	}

	.user-id {
		font-size: 12px;
	}

	.body-backdrop {
		text-align: center;
		display: flex;
		flex-direction: column;
		position: relative;
		top: -130px;
		background-color: #fff;
		width: 80%;
		height: 180px;
		padding-left: 20px;
		padding-right: 20px;
		margin: 0 auto;
		border-radius: 10px;
	}

	.body-hr {
		width: 100%;
		height: 1px;
		background-color: #ebebee;
	}

	.body-text {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		height: 125px;
		width: 100%;
		align-items: center;
	}

	.text-top {
		font-size: 18px;
		margin-bottom: 10px;
	}

	.text-bon {
		font-size: 14px;
		color: #9c9c9c;
	}

	.text {
		height: 52px;
		position: relative;
		left: -110px;
		top: -100px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
</style>